<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- 社区入口 -->
				<h1 class="title">店铺</h1>
			</header>
			

			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a class="tab-item external" href="../../shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="../chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="../cart/cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="../user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				
				<!-- 搜索栏 -->
				 <div class="searchbar row">
				     <div class="search-input col-85">
				       <input @click="goSearch" type="search" id='search' placeholder='输入关键字...'/>
				     </div>
				     <a @click="goSearch" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				 </div> 
				
				<!-- 商店头 -->
				  <div class="card">
					<div class="card-header"><input  v-model="comName" style="border: none;" /></div>
					<div class="card-content">
					  <div class="list-block media-list">
						<ul>
						  <li class="item-content">
							<div class="item-media">
								<!-- 商店图标 -->
							  <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
							</div>
							<div class="item-inner">
							  <div class="item-title-row">
								<div class="item-title">米家小店</div>
							  </div>
							  <div class="item-subtitle">粉丝数: 12400</div>
							</div>
						  </li>
						</ul>
					  </div>
					</div>
					<div class="card-footer">
					  <span>星级 ★★★★★</span>
					  <!-- <span>关注</span> -->
					</div>
				  </div> 
					
				  <div class="card" v-for="item in items">
				    <div class="card-header"><a :href="'comDetail.html?shopId='+item.shopId">{{item.name}}</a></div>
				    <div class="card-content">
				      <div class="card-content-inner">
						  <!-- 图片 -->
						  <img :src="item.manufacture" height="300px" width="250px"><br>
						  简介: {{item.description}}<br>
						  价格: <font  color="orangered">¥ {{item.price}}</font><br>
						  销量: {{item.sales}}
					  </div>
				    </div>
				    <div class="card-footer">可以使用悦金币</div>
				  </div>
				
				<p><a @click="backpage" class="button">上一页</a></p>
				<p><a @click="nextpage" class="button">下一页</a></p>
				
			</div>
			
			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		<!-- VUE的使用 -->
		<script>
			//获取用户id
			//var userId = "001";
			//商户id
			var merchantId = getUrlParam('merchantId');
			//var merchantId = "001"
			//alert(merchantId)
			//当前页
			var pageNumber = 1;
			//页大小
			var pageSize =2;
			//vue挂载
			var app = new Vue({
				el:"#app",
				data:{
					comName:"",
					items:[]
				},
				// 方法区
				methods:{
					//跳转到搜索页面的方法
					goSearch:function(){ 
					window.location="../shop_search.html"
					},
					initMerchant:function(){
						//ajax for axios
						var that=this;
						axios.get(serviceIP+"/shop/findMerchantByMerchantId?merchantId="+merchantId+""
						,{headers:{"token":token,"refreshtoken":refreshtoken}})
						.then(function(d){
							//$.alert(d.data.msg)
							that.comName=d.data.data.nickname;
						});
					},
					//初始化条目
					initCommodityItem:function(){
						//ajax for axios
						var that=this;
						axios.get(serviceIP+"/shop/initCommodityItem?merchantId="+merchantId+"&pageNumber="+pageNumber+"&pageSize="+pageSize+""
						,{headers:{"token":token,"refreshtoken":refreshtoken}})
						.then(function(d){
							console.log(d)
							//$.alert(d.data.list)
							that.items=d.data.list;
						});
					},
					//下一页
					nextpage:function(){
						pageNumber++
					     //ajax for axios
					     var that=this;
					    axios.get(serviceIP+"/shop/initCommodityItem?merchantId="+merchantId+"&pageNumber="+pageNumber+"&pageSize="+pageSize+""
						,{headers:{"token":token,"refreshtoken":refreshtoken}})
					     .then(function(d){
							 //$.alert(d.data.lastPage)
							 if(pageNumber>d.data.lastPage){
								 
								$.alert("这已经是最后一页");
							}else{
								that.items=d.data.list;
							}
					     });
					},
					//上一页
					backpage:function(){
						pageNumber--
					     //ajax for axios
					     var that=this;
					     axios.get(serviceIP+"/shop/initCommodityItem?merchantId="+merchantId+"&pageNumber="+pageNumber+"&pageSize="+pageSize+""
						 ,{headers:{"token":token,"refreshtoken":refreshtoken}})
					     .then(function(d){
							 if(pageNumber<1){
								 
								$.alert("不能再前了");
							}else{
								
								that.items=d.data.list;
							}
					     });
					},
					
				},
				mounted(){
					
					this.initMerchant();
					
					this.initCommodityItem();
					
					
				}
			});
		</script>
		<!-- 初始化js -->
		<script type="text/javascript">
		//初始化方法
		$(function(){
			
			
			
		});	
		</script>
		<!-- 方法js -->
		<script type="text/javascript">
			
		</script>
		<!-- 点击js -->
		<script type="text/javascript">
			
		</script>
		<!-- scroll js -->
		<script type="text/javascript">
			 // 加载flag
			      var loading = false;
			      // 最多可加载的条目
			      var maxItems = 100;
			
			      // 每次加载添加多少条目
			      var itemsPerLoad = 20;
			
			      function addItems(number, lastIndex) {
			              // 生成新条目的HTML
			              var html = '';
			              for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
			                  html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
			              }
			              // 添加新条目
			              $('.infinite-scroll-bottom .list-container').append(html);
			
			          }
			          //预先加载20条
			      addItems(itemsPerLoad, 0);
			
			      // 上次加载的序号
			
			      var lastIndex = 20;
			
			      // 注册'infinite'事件处理函数
			      $(document).on('infinite', '.infinite-scroll-bottom',function() {
			
			          // 如果正在加载，则退出
			          if (loading) return;
			
			          // 设置flag
			          loading = true;
			
			          // 模拟1s的加载过程
			          setTimeout(function() {
			              // 重置加载flag
			              loading = false;
			
			              if (lastIndex >= maxItems) {
			                  // 加载完毕，则注销无限加载事件，以防不必要的加载
			                  $.detachInfiniteScroll($('.infinite-scroll'));
			                  // 删除加载提示符
			                  $('.infinite-scroll-preloader').remove();
			                  return;
			              }
			
			              // 添加新条目
			              addItems(itemsPerLoad, lastIndex);
			              // 更新最后加载的序号
			              lastIndex = $('.list-container li').length;
			              //容器发生改变,如果是js滚动，需要刷新滚动
			              $.refreshScroller();
			          }, 1000);
			      });
		</script>
	</body>
</html>
